import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Space, Col, Row, Checkbox, DatePicker, Divider, Table, Drawer, Radio, Modal } from 'antd';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api/lst';
import type { ColumnsType } from 'antd/es/table';
import './Addpackage.scss'
import { useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { Value } from 'sass';
// import type { ColumnsType } from 'antd/es/table'
interface DataType {
    key: React.Key;
    goodname: string;
    original: number;
    stock: number;
    originalprice: number;
    discount: number;
    discountprice: string;
    classification: [];
    img: string;
    Secondkill: number;
    id: number,
    falg: false

}
interface ListType {
    key: React.Key;
    name: string;
    price: number;
    stock: number;
    salesvolume: number;
    img: string;
    classify: string;
    id: number,
    falg: false
}

const { RangePicker } = DatePicker;
const { TextArea } = Input;
function Addpackage(props:any) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    var [form] = Form.useForm()
    var [tableData, setTableData] = useState<DataType[]>([])
    var [listData, setListData] = useState<ListType[]>([])

    // var [text, setText] = useState([])
    let [params, setParams] = useSearchParams();
    let [id, setid] = useState();

    var info = async () => {
        var id = params.get('id')

        // var res3 = await service.marketing.conpon_info({ id })
        // // console.log(res3);
        // setText(res3.data)
    }
    useEffect(() => {
        info()
    }, [])
    var navigate = useNavigate()
    //返回
    const back = () => {
        navigate('/index/package')
    }
    //提交

    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        const time = (formvalues.time[0].$y) + "/" + (formvalues.time[0].$M + 1) + "/" + (formvalues.time[0].$D) + " - " + (formvalues.time[1].$y) + "/" + (formvalues.time[1].$M + 1) + "/" + (formvalues.time[1].$D)
        var res = await service.marketing.package_add({name:formvalues.name,price:price,packageprice:discountprice,sum:secondkill,states:formvalues.states,time:time})
        
        navigate('/index/package')
    }
    //表格

    const list = async () => {
        var res = await service.marketing.packagegood_list()
        // console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }
    useEffect(() => {
        list()
    }, [])
    //单选

    const columns: ColumnsType<DataType> = [
        {
            title: '活动名称',
            dataIndex: 'name',
            render: (_, record) =>
                <div className='img' style={{ width: 150 }}>
                    <Form.Item name='checked'  >
                        <input type="checkbox" checked={record.falg} style={{ marginTop:30 }} />
                    </Form.Item>
                    <img src={record.img} alt="" style={{ width: 60 }} />
                    <p>{record.goodname}</p>
                </div>

        },
        {
            title: '原价(元)',
            dataIndex: 'originalprice',
            render: (_, record) => <p style={{ width: 80 }}>{record.originalprice}</p>

        },
        {
            title: '可用库存',
            dataIndex: 'stock',
            render: (_, record) => <p style={{ width: 80 }}>{record.stock}</p>
        },
        {
            title: '套餐价',
            dataIndex: 'discountprice',
            render: (_, record) => <input type="text"    className='input' name='discountprice' onChange={(e)=>{change(e)}} />
            
        },
        {
            title: '套餐商品',
            dataIndex: 'Secondkill',
            render: (_, record) => <input type="text"  className='input' name='Secondkill' onChange={(e)=>{changes(e)}}/>
        },
        {
            title: '操作',
            render: (_, record) => (
                <Space size="middle">
                    <Button className='button' onClick={() => { del(record) }} >删除</Button>
                </Space>
            ),
        },
    ];
    const [secondkill, setSecondkill] = useState();
    const [discountprice, setDiscountprice] = useState();
    const change=(e:any )=>{
        setDiscountprice(e.target.value)
        // console.log(discountprice);
        
    }
    const changes=(e:any )=>{
        setSecondkill(e.target.value)
        // console.log(secondkill);
        
    }
    //删除
    const del = async (record: any) => {
        var res1 = await service.marketing.packagegood_del({ id: record.id, })
        console.log(res1);
        list()
    }
    //新增
    const addlist = () => {
        setOpen(true);

    }
    const [open, setOpen] = useState(false);

    //弹出

    const showModal = async () => {
        setIsModalOpen(true);
        var res4 = await service.decrement.shoulist_list()
        res4.data.map((item: any) => {
            item.key = item.id
        })
        setListData(res4.data)
        // console.log(res4);
    };



    const handleCancel = () => {
        setIsModalOpen(false);
    };
    var [name, setName] = useState('')
    var [img, setImg] = useState('')
    var [price, setPrice] = useState(99 )
    var [stocks, setStocks] = useState( )
    const check = (record: any) => {
        record.falg = !record.falg
        console.log(record);
        setName(record.name);
        setImg(record.img);
        setPrice(record.price)
        setStocks(record.stock)
    
    }
    const handleOk = async () => {
        var ser5 = await service.marketing.packagegood_add({ goodname: name,originalprice:price,stock:stocks ,img:img})
        console.log(ser5);
        setIsModalOpen(false);
        list()

};
    const column: ColumnsType<ListType> = [
        {
            title: '商品信息',
            dataIndex: 'name',
            render: (_, record) => <div className='imgs' style={{ width: 200, display: 'flex' }}>
                <input type="checkbox" onChange={(e) => { check(record) }} />
                <img src={record.img} alt="" style={{ width: 50 }} />
                <p style={{ width: 120 }}>{record.name}</p>
            </div>
        },
        {
            title: '价格',
            dataIndex: 'price',
            render: (_, record) => <p>{record.price}</p>

        },
        {
            title: '库存',
            dataIndex: 'stock',
            render: (_, record) => <p>{record.stock}</p>

        },
        {
            title: '销量',
            dataIndex: 'salesvolume',
            render: (_, record) => <p>{record.salesvolume}</p>

        },
    ];


    return (
        <div className='addpackage'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">套餐商品</a>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">新建套餐商品</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {id ? <h2>编辑套餐商品</h2> : <h2>新建套餐商品</h2>}

                </div>

            </div>
            <div className='form'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 1000 }}
                    onFinish={onFinish}

                >
                    <Form.Item name='name' label="活动名称"  >
                        <Input style={{ width: 300 }} />
                    </Form.Item>
                    <Form.Item name='time' label="活动日期">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item name="states" label="状态">
                        <Select
                            style={{ marginRight: 30, width: 300 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '未开始', label: '未开始' },
                                { value: '进行中', label: '进行中' },
                                { value: '已结束', label: '已结束' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="channel" label="使用渠道">
                        <Checkbox.Group style={{ width: '100%' }}
                        //onChange={onChange}
                        >
                            <Row>
                                <Col span={20}>
                                    <Checkbox value="weixin"> 微信商城</Checkbox>
                                </Col>
                                <Col span={20}>
                                    <Checkbox value="pc">PC网站</Checkbox>
                                </Col>
                                <Col span={20}>
                                    <Checkbox value="app"> App</Checkbox>
                                </Col>
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="states" label="表格">

                        <Button htmlType="button"
                            onClick={showModal}
                        >
                            新增
                        </Button>
                        <Table columns={columns} dataSource={tableData} style={{ width: 1200 }} />


                    </Form.Item>
                    <Form.Item label="操作">
                        <Button htmlType="submit" style={{ marginRight: 30 }}>
                            提交
                        </Button>
                        <Button htmlType="button"
                            onClick={back}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
                <Modal title="商品列表" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Table
                        columns={column}
                        dataSource={listData}
                    />
                </Modal>
            </div>
        </div>
    );
}

export default Addpackage;